<template>
	<layout>
		<view class="content">
			<view class="content-left li">
				<template v-for="item in players_left">
					<uni-card note="true" :hideFooterBorder="true">
						<img class="vote-img" :src="item.img_path" mode="widthFix" />
						<template v-slot:footer>
							<view class="footer-box">
								<view>{{item.vote_count}}票</view>
								<view>{{item.label}}</view>
							</view>
							<view class="footer-bnt">
								<button>投票</button>
							</view>
						</template> 
					</uni-card>
				</template>
			</view>
			<view class="content-right li">
				<template v-for="item in players_right">
					<uni-card note="true" :hideFooterBorder="true">
						<img class="vote-img" :src="item.img_path" mode="widthFix" />
						<template v-slot:footer>
							<view class="footer-box">
								<view>{{item.vote_count}}票</view>
								<view>{{item.label}}</view>
							</view>
							<view class="footer-bnt">
								<button>投票</button>
							</view>
						</template> 
					</uni-card>
				</template>
			</view>
		</view>
	</layout>
</template> 
<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	import layout from '@/components/layout/index.vue'
	import {
		mapActions
	} from 'vuex'
	
	export default {
		data() {
			return {
				title: "\"民泰杯\"团体摄影大赛",
				players: [
					{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},
					{
						label: '林登强',
						vote_count: 2500,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/TnHnFgPD3KBgzEX1MwimPBKiJI8Jvp886LtRNQbM.jpeg',
					},
					{
						label: '林登强',
						vote_count: 2500,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/TkswRABevpJ3bQWRr2Kkl8lGvQmfMCwwWk9ZrMGO.jpeg',
					},
					{
						label: '林登强',
						vote_count: 2500,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/P86gFBGw4dpgC03jdeyGfOBH7gpat6NATUzo0kdW.jpeg',
					},
					{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},
					{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},
					{
						label: '林登强',
						vote_count: 2500,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},
					{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},
					{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},
					{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},
					{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},{
						label: '林登强',
						vote_count: 109,
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
					},
				],
				players_left:[],
				players_right:[],
			}
		},
		onLoad() {
			const {
				setNavigationBarTitle,
				setPlayersLeft,
				setPlayersRight
			} = this
	
			setNavigationBarTitle()
			setPlayersLeft()
			setPlayersRight()
		},
		components: {
			uniCard,
			layout
		},
		methods: {
			...mapActions(['setNavigationBarTitle']),
			setPlayersLeft() {
				this.players_left = this.players.map((item, index) => {
					if(index%2 === 0) {
						return item	
					}
				}).filter(item => item)
			},
			setPlayersRight() {
				this.players_right = this.players.map((item, index) => {
					if(index%2 !== 0) {
						return item	
					}
				}).filter(item => item)
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		font-size: 30rpx;
		font-weight: 400;
		display: flex;
		margin: 0 10rpx;
		margin-top: 100rpx;
		padding-bottom: 150rpx;
		.li {
			width: 50%;
			.vote-img {
				width: 100%;
				vertical-align: middle;
			}
			.uni-card {
				margin: 10rpx 5rpx;
				.uni-card__footer{
					border: 0;

					.footer-box{
						text-align: center;
						margin: 10rpx 0;
						
					}
					
					.footer-bnt {
						button{
							color: #fff;
							background: #FC8515;	
						}
					}
				}
			}
		}
		.content-left {
			
		}
		
		.content-right {
		}
	}
</style>
